<template>
  <div>
    <!-- 学号，姓名，考试进度 -->
    <el-tabs v-model="activeName" @tab-click="ceshi">
        <el-tab-pane label="未阅卷" name="-1"></el-tab-pane>
        <el-tab-pane label="阅卷中" name="0"></el-tab-pane>
        <el-tab-pane label="已批" name="1"></el-tab-pane>
    </el-tabs>

    <!-- 搜索框 -->
    <el-form :inline="true" :model="examStudentVo" class="demo-form-inline">
        <el-form-item label="学号">
            <el-input v-model="examStudentVo.studentId" placeholder="请输入学号" clearable>></el-input>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="examStudentVo.studentName" placeholder="请输入姓名" clearable>></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="examStudentVo.sex" placeholder="性别" clearable>
                <el-option label="男" value=1></el-option>
                <el-option label="女" value=2></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="年龄">
            <el-input v-model="examStudentVo.age" placeholder="请输入年龄" clearable>></el-input>
        </el-form-item>
        <el-form-item label="是否作弊">
            <el-select v-model="examStudentVo.isCheated" clearable>
                <el-option label="作弊" value="true"></el-option>
                <el-option label="没作弊" value="false"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="warning" @click="clearConnent">清空</el-button>
        </el-form-item>
    </el-form>

    <div style="margin-top: 20px">

        <!-- 考试信息表 -->
        <el-table style="width: 100%" border :data="list"
            :row-class-name="tableRowClassName"
            :header-cell-style="{background:'#F2F6FC',color:'#606266'}"
            ref="filterTable"
        >
            <el-table-column prop="number" label="学号" width="100">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="100">
            </el-table-column>
            <el-table-column prop="prop" label="性别" width="100">
                <template slot-scope="scope">
                    <el-tag
                    :type="scope.row.sex==1? 'warning' : 'danger'"
                    disable-transitions>{{scope.row.sex==1?'男':'女'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="100">
            </el-table-column>
            <el-table-column prop="prop" label="是否作弊" width="80" align="center">
                <template slot-scope="scope">
                    <el-tag
                    :type="scope.row.studentConnection.isCheated? 'danger' : 'success'"
                    disable-transitions>{{scope.row.studentConnection.isCheated?'√':'×'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="prop" label="是否考试" width="80" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.studentConnection.isCheated"
                    type="danger"
                    disable-transitions>作弊</el-tag>
                    <el-tag v-else
                    :type="scope.row.studentConnection.isAttended==1?'success':'danger'"
                    disable-transitions>{{scope.row.studentConnection.isAttended==1?'完成':'未完成'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="prop" label="考试进度" width="200" align="center">
                <template slot-scope="{row,$index}">
                    <el-progress :percentage="Math.round(row.studentConnection.progress*100)"></el-progress>
                </template>
            </el-table-column>
            <el-table-column prop="prop" label="操作" width="200" align="center">
                <template slot-scope="{row,$index}">
                  <el-button v-if="row.studentConnection.isMarked!=1" type="primary" @click="enterMarking(row)" size="mini">开始阅卷</el-button>
                  <el-button v-else-if="row.studentConnection.isMarked==1" type="warning" @click="enterMarking(row)" size="mini">复卷</el-button></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination
            style="margin-top: 20px; text-align: center"
            :current-page.sync="examStudentVo.current"
            :total="total"
            :page-size="examStudentVo.limit"
            :page-count="7"
            :page-sizes="[3, 5, 10]"
            @current-change="getPageList"
            @size-change="handleSizeChange"
            layout="prev, pager, next, jumper, ->, sizes, total"
            >
        </el-pagination>

    </div>
  </div>
</template>

<script>
export default {
  name:'markingDetail',
  data() {
    return {
      // 考试信息
      exam_info:{},
      // 学生状态数据集
      list:[],
      // 获取信息列表的body条件
      examStudentVo:{
          current:1,
          limit:5,
          examId:'',
          studentId:null,
          studentName:null,
          sex:null,
          age:null,
          //是否作弊
          isCheated:null,
          //是否以阅卷，-1,0,1
          isMarked:-1,
          // 是否已参加考试，-1,0,1
          isAttended:null,
      },
      // 总数
      total:0,
      //当前看中状态
      activeName: '-1',
      // 定时器
      timer:null,
    }
  },
  mounted() {
      this.exam_info = JSON.parse(this.$route.query.exam_info);
      this.examStudentVo.examId = this.exam_info.id;
      this.getPageList();
      this.timer = setInterval(this.cyclicity, 10000);
  },
  beforeDestroy() {
      clearInterval(this.timer);
  },
  methods: {
    // 进入个人阅卷界面 
    async enterMarking(row){
        // 为防止有人开始批阅了，但是列表还有这信息
        let result = await this.$API.marking.getExamStudentConnectionTea(this.exam_info.examId,row.id);
        if(result.code==20000){
            const that = this;
            // 因为要全屏考试，所以需要先用遮罩把网页菜单栏之类的全部挡掉，再跳转
            const loading = this.$loading({
                lock: true,
                text: '正在努力加载试卷中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(() => {
                loading.close();
                that.$router.push({ 
                name: 'singleMarking',
                query:{
                    exam_info:JSON.stringify({ 
                    paperId: that.exam_info.paperId,
                    examId:that.exam_info.id, 
                    stuId:row.id})
                },
                })
            }, 2000);
        }else{
            this.$message({
              type: 'warning',
              message: '该试卷正在批阅中。。。'
            });
            this.getPageList();
            return ;
        }
    },
    // 用来定时刷新需要周期更新的数据
    cyclicity() {
        this.getPageList();
    },
    // 清空按钮
    clearConnent(){
        this.deleteSearch();
        this.getPageList();
    },
    ceshi(){
        //要改变attended值
        this.examStudentVo.isMarked = parseInt(this.activeName);
        this.examStudentVo.current = 1;
        this.getPageList();
    },
    tableRowClassName({row, rowIndex}) {
        if (rowIndex%2 === 1) {
            return 'success-row';
        }
        return '';
    },
    //当分页器某一页需要展示数据条数变化时触发
    handleSizeChange(limit){
        this.examStudentVo.limit = limit;
        this.getPageList();
    },
    // 洗刷刷把空字符串全部弄成null
    clearSearch(){
        if(this.examStudentVo.studentId==''){
            this.examStudentVo.studentId = null;
        }
        if(this.examStudentVo.studentName==''){
            this.examStudentVo.studentName = null;
        }
        if(this.examStudentVo.sex==''){
            this.examStudentVo.sex = null;
        }
        if(this.examStudentVo.age==''){
            this.examStudentVo.age = null;
        }
        if(this.examStudentVo.isCheated==''){
            this.examStudentVo.isCheated = null;
        }
    },
    // 恢复默认状态
    deleteSearch(){
        this.examStudentVo.current = 1;
        this.examStudentVo.limit = 5;
        this.examStudentVo.studentId = null;
        this.examStudentVo.studentName = null;
        this.examStudentVo.sex = null;
        this.examStudentVo.age = null;
        this.examStudentVo.isCheated = null;
    },
    //搜索
    onSubmit(){
        //重新调用获取列表函数
        this.getPageList();
    },
    // 获取学生信息数据集
    // 三种都差不多
    async getPageList(){
        this.clearSearch();
        //原因是后端是从0开始的
        let examBody = {...this.examStudentVo};
        examBody.current = examBody.current-1;
        // 性别好像得字符串转整型
        if(examBody.sex!=null){
            examBody.sex = parseInt(this.examStudentVo.sex);
        }
        let result = await this.$API.invigilation.getAllStudentForExam(examBody);
        if(result.code==20000){
            this.list = result.data.rows;
            this.total = result.data.total;
        }
    },
  },
  watch:{
    //监听activeName，只要切换了状态，输入框内容应该为空
    activeName:{
        handler(){
            // 要先清空查询条件
            this.deleteSearch();
            // 查询
            this.onSubmit();
        }
    }
  },
}
</script>

<style>

</style>